<template>
  <el-card>
    <template #headear>
      <h3>自定义表单</h3>
    </template>
    <el-row>
      <el-col :span="16" :gutter="20">
        <base-form
          ref="formRef"
          :schema="formSchema"
          :data="formData"
          :rules="formRules"
        >
          <el-button @click="handleSubmit">登录</el-button>
          <el-button @click="handleReset">重置</el-button>
        </base-form>
      </el-col>
      <el-col :span="8">
        <div>
          <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { ElMessage } from 'element-plus'
import useForm from './hook/useForm'
import { ref } from 'vue'
export default {
  name: 'Form',
  setup() {
    const formRef = ref(null)
    const { formSchema, formData, formRules } = useForm()
    const handleSubmit = () => {
      formRef.value.submit(() => {
        ElMessage.success('成功提交')
      })
    }
    const handleReset = () => {
      formRef.value.reset()
    }
    return {
      formRef,
      formSchema,
      formData,
      formRules,
      handleSubmit,
      handleReset
    }
  }
}
</script>
